<template>
  <view class="component-box" >
    <view v-if="!fixedTop" :style="[moduleBgCss]" class="module-bg"></view>
    <view
      v-if="!fixedTop"
      class="search-box"
      @click="$utils.toUrl('/other/search/searchPage')"
    >
      <view
        :class="[
          'input-section',
          borderType == '2' ? 'right-angle' : '',
          propsData.params.contentAlign == 'center' ? 'content-center' : '',
        ]"
        :style="[
          {
            backgroundColor: propsData.params.inputBgColor,
            borderColor: propsData.params.inputBorder,
          },
        ]"
      >
        <view
          class="input-inner"
          :style="{ color: propsData.params.inputTextColor }"
        >
          <i class="iconfont icon-search"></i>
          <text :style="{ color: propsData.params.inputTextColor }">{{
            propsData.params.placeholder || $t("diy.input")
          }}</text>
        </view>
      </view>
      <view
        class="saoma"
        v-if="propsData.params.showImageSearch"
        @click="go_searchImg"
      >
        <i class="iconfont icon-scanning"></i>
      </view>
    </view>
    <!-- 输入框固顶 -->
    <view
      v-else
      class="search-box"
      @click="$utils.toUrl('/other/search/searchPage')"
    >
      <view class="input-sticky">
        <view class="sticky-box">
          <view :style="[moduleBgCss]" class="module-bg full-width"></view>
          <view
            :class="[
              'input-section',
              borderType == '2' ? 'right-angle' : '',
              propsData.params.contentAlign == 'center' ? 'content-center' : '',
            ]"
            :style="[
              {
                backgroundColor: propsData.params.inputBgColor,
                borderColor: propsData.params.inputBorder,
              },
            ]"
          >
            <view class="input-inner">
              <i class="iconfont icon-search"></i>
              <text>{{ propsData.params.placeholder || $t("diy.input") }}</text>
            </view>
          </view>
          <view
            class="saoma"
            v-if="propsData.params.showImageSearch"
            @click="go_searchImg"
          >
            <i class="iconfont icon-scanning"></i>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { diyMixin } from "../../mixins/diy";

export default {
  props: {
    propsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  mixins: [diyMixin], //混入文件

  computed: {
    borderType() {
      return this.propsData.params.borderType;
    },
    styleType() {
      return this.propsData.params.styleType;
    },
    fixedTop() {
      return this.propsData.params.fixedTop;
    },
  },
  methods: {
    go_searchImg() {
      this.$utils.toUrl("/cropping/search_deng/search_deng");
    },
  },
};
</script>

<style scoped lang="scss">
.set_width {
  width: calc(100% - 80rpx) !important;
}
.component-box {
  width: 100%;
  position: relative;
  display: flex;

  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
  .full-width {
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
  }
  .search-box {
    width: 100%;
    height: 84rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;

    .input-section {
      // width: 83.6%;
      height: 64rpx;
      align-items: center;
      border-radius: 60rpx;
      overflow: hidden;
      background-color: #f2f2f2;
      display: flex;
      padding-right: 20rpx;
      border: 1rpx solid #707070;
      position: relative;
      margin: 0 3%;
      flex: 1;
      .input-inner {
        position: relative;
        display: inline-block;
      }
      .iconfont {
        position: absolute;
        left: 22rpx;
        z-index: 11;
        font-size: 40rpx;
      }
      text {
        margin-left: 68rpx;
        color: #9b9b9b;
      }
    }
    .right-angle {
      border-radius: 8rpx;
    }
    .content-center {
      justify-content: center;
    }
    .input-sticky {
      width: 100%;
      .sticky-box {
        width: 100%;
        height: 84rpx;
        position: relative;
        display: flex;
        align-items: center;
      }
      .input-section {
        height: 64rpx;
        padding: 10rpx;
      }
      /deep/ .u-sticky-wrap {
        height: 84rpx;
        background-color: inherit;
      }
      /deep/ .u-sticky {
        height: 84rpx;
      }
    }
  }
  .fixed-top {
    position: fixed;
    left: 0;
    top: 128rpx;
    z-index: 511;
  }
}

.saoma {
  // background: #fb66a4;
  padding-right: 18rpx;
  height: 84rpx;
  display: flex;
  align-items: center;
  border: none;
  i {
    font-size: 60rpx;
    color: #f1f1f1;
  }
}
</style>
